<template>
    <div>
         <div class="heade"> 
            <span class="close" @click="handleClosedl()"></span>
            <h2 class="l-txt">干货</h2>
		</div>
        <van-dropdown-menu class="menu">
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
        <div class="foodlist">
            <li v-for="data in foodlist" :key="data.goods_id">
                <img :src="data.goods_image" alt="">
               <p>{{data.goods_name}} </p>
               <h6><span class="price">${{data.goods_price}}</span><span class="salenum">{{data.goods_salenum}}人付款</span></h6>
            </li>
            
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
import { DropdownMenu, DropdownItem } from 'vant';
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
    data () {
        return {
            foodlist: [],
            value1: 0,
            value2: 'a',
            option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
            option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ]
        }
    },
    mounted(){
        console.log(this.$route
        )
          axios.post('/lct?api_version=2.3.0&platType=2&client=wap&isEncry=0&time=1583508709853&act=goods&op=goodsList',{provinc: 140,city: 140100000000,keyword:'' ,
page: 1,sorted: 4,sequence: 0,gcId: this.$route.params.gc_id,workshop:''}
    ).then(res => {
        console.log(res)
      this.foodlist = res.data.datas.list
      console.log(res.data.datas.list)
      // const r = this.classifyList.gc_id
    })

    },
    methods:{
        handleClosedl() {
            this.$router.back()
            // console.log(111)
        }
    }
}
</script>
<style lang="scss" scoped>
.heade{    width: 100%;
           display:flex;
           height:50px;
           align-items: center;
           position: relative;
           background: #fff;
           position: fixed;
           top: 0;
        .close{
            height:20px;
            width:20px;
            display: block;
            background:url("https://m.lecuntao.com/resource/images/login/close.png?lv=c5dce8706a");
            background-size:100% 100%;   
            position: absolute;
            left: 10px;
        }
        .l-txt{
            font-size: 18px;
            margin:0px auto;
            font-weight: normal;
            line-height: 100%;
        }
     }
.menu{
    margin-top: 50px;
    width: 100%;
    position: fixed;
    top: 0px;
}
.foodlist{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-top: 80px;
    li{
        list-style: none;
        height: 210px;
        width: 150px;
        // background: pink;
        margin-top: 20px;
        img{
            width: 150px;
            height: 120px;
        }
        p{
        width:140px;
        font-size: 13px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        display: -webkit-box;
        margin-top: 10px;
        margin-left:5px ;
        }
        h6{
            display: flex;
            justify-content: space-between;
            width: 140px;
            margin-top: 10px;
            font-weight:normal;
            
            .price{
                color: #f81234;
                font-size: 14px;
                margin-left:5px ;  
            }
            .salenum{
                color:#999;
                font-size: 12px;
            }
        }
    }
}

</style>
